<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider collapsible v-model:collapsed="collapsed">
      <div class="logo">
        <img v-if="!collapsed" src="/favicon.ico" alt="logo" style="height:32px;margin-right:8px;" />
        <span v-if="!collapsed">酒店后台</span>
      </div>
      <a-menu theme="dark" mode="inline" :selectedKeys="[selectedKey]" @click="onMenuClick">
        <a-sub-menu key="hotel-sub">
          <template #icon><HomeOutlined /></template>
          <template #title>酒店管理</template>
          <a-menu-item key="hotel">
            <template #icon><InfoCircleOutlined /></template>
            基本信息
          </a-menu-item>
          <a-menu-item v-if="hotelStore.hasHotel" key="location">
            <template #icon><EnvironmentOutlined /></template>
            位置信息
          </a-menu-item>
          <a-menu-item v-if="hotelStore.hasHotel" key="amenities">
            <template #icon><BulbOutlined /></template>
            设施管理
          </a-menu-item>
          <a-menu-item v-if="hotelStore.hasHotel" key="policy">
            <template #icon><FileProtectOutlined /></template>
            政策管理
          </a-menu-item>
        </a-sub-menu>
        
        <a-menu-item v-if="hotelStore.hasHotel" key="room">
          <template #icon><AppstoreOutlined /></template>
          客房管理
        </a-menu-item>
        
        <a-menu-item v-if="hotelStore.hasHotel" key="order">
          <template #icon><ProfileOutlined /></template>
          订单管理
        </a-menu-item>
        
        <a-menu-item v-if="hotelStore.hasHotel" key="reviews">
          <template #icon><CommentOutlined /></template>
          评论管理
        </a-menu-item>
        
        <!-- <a-menu-item v-if="hotelStore.hasHotel" key="customer">
          <template #icon><UserOutlined /></template>
          客户管理
        </a-menu-item> -->
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="admin-header">
        <span>后台管理系统</span>
        <div class="admin-user">
          <a-avatar style="background:#87d068" icon="admin" />
          <span class="admin-name" style="font-size:16px; font-weight: 550;">管理员</span>
          <a-button type="link" @click="logout">退出</a-button>
        </div>
      </a-layout-header>
      <a-layout-content style="margin: 16px">
        <a-breadcrumb style="margin-bottom: 16px">
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item>{{ breadcrumb }}</a-breadcrumb-item>
        </a-breadcrumb>
        <a-card>
          <router-view />
        </a-card>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { 
  HomeOutlined, 
  AppstoreOutlined, 
  ProfileOutlined, 
  UserOutlined,
  InfoCircleOutlined,
  EnvironmentOutlined,
  BulbOutlined,
  FileProtectOutlined,
  CommentOutlined
} from '@ant-design/icons-vue';
import { useHotelStore } from '@/stores/hotelStrore';

const collapsed = ref(false);
const router = useRouter();
const route = useRoute();
const selectedKey = ref(route.name?.toString() || 'hotel');
const hotelStore = useHotelStore();
const isHotelInfoLoaded = ref(false);

function onMenuClick({ key }: { key: string }) {
  selectedKey.value = key;
  router.push(`/admin/${key}`);
}

// 初始化加载酒店信息
async function initializeHotelInfo() {
  console.log("AdminLayout组件初始化酒店信息");
  try {
    const hotelInfo = await hotelStore.getHotelInfo();
    isHotelInfoLoaded.value = true;
    console.log("AdminLayout成功获取酒店信息，ID:", hotelStore.safeHotelId);
    return hotelInfo;
  } catch (error) {
    console.error("获取酒店信息失败:", error);
    return null;
  }
}

onMounted(async () => {
  console.log("AdminLayout组件挂载，开始获取酒店信息");
  await initializeHotelInfo();
})

// 监听路由变化，确保在路由变化时酒店信息已加载
watch(() => route.path, async (newPath) => {
  console.log("路由变化:", newPath);
  if (!isHotelInfoLoaded.value) {
    console.log("路由变化时重新加载酒店信息");
    await initializeHotelInfo();
  }
}, { immediate: true });

const breadcrumb = computed(() => {
  switch(selectedKey.value) {
    case 'hotel': return '基本信息管理';
    case 'room': return '客房管理';
    case 'order': return '订单管理';
    case 'customer': return '客户管理';
    case 'location': return '位置信息管理';
    case 'amenities': return '设施管理';
    case 'policy': return '政策管理';
    case 'reviews': return '评论管理';
    default: return '';
  }
});

const logout = () => {
  // 这里可以添加退出登录逻辑
  localStorage.removeItem('admin_token');
  router.push('/admin/login');
};
</script>

<style scoped>
.logo {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  background: rgba(255,255,255,0.1);
}
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 0 24px;
}
.admin-user {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style> 